<template>
	<view class="app">
		<AppNavbar :bgColor="'transparent'" title="My Pet" titlecolor="black" :fontWeight="600"></AppNavbar>


		<MypetSwiper :list="state.petlist" @change="swiperchange"></MypetSwiper>

		<view class="mypet-content px-1">
			<view class="mypet-plan-line">
				<view class="mypet-plan-line-box">
					<view class="mypet-plan-line-text flex-between-center">
						<text>Finish today</text>
						<text>{{percentage}}%</text>
					</view>
					<up-line-progress :percentage="percentage" height="5" :showText="false" active-color="#f9a438"
						inactive-color="transparent"></up-line-progress>
				</view>
			</view>
			<view class="mypet-content-box p-2">
				<!-- 计划 -->
				<view class="mypet-content-plan ">
					<view class="mypet-content-plan">
						<view class="mypet-content-plan-text flex-between-center">
							<text class="">Plan</text>
							<text class="f-size-12 all">View all</text>
						</view>
						<view class="mypet-content-plan-diet d-flex my-2 jc-around">
							<!-- 喂食 --> 
							<view class="feed diet bor-radius-10"
								@click="goto('/pages/MyPet/FeedingSetting?type=feed&chokerId='+state.petlist[state.scrollKey].chokerId)">
								<view class="diet-text">
									<p class="font-weight-600 f-size-20 my-1" v-if="state.feedData?.amountPlan">
										{{state.feedData.amountPlan}}
									</p>
									<p class="font-weight-600 f-size-16" v-else>Feeding time is not set</p>
								</view>
								<view class="feed-btn py-1 px-2 f-size-12 bor-radius-10 font-weight-600">
									feeding
								</view>
								<image src="/static/image/bone.png" mode=""></image>
							</view>
							<!-- 饮水 -->
							<view class="drinking diet bor-radius-10"
								@click="goto('/pages/MyPet/FeedingSetting?type=drinking&chokerId='+state.petlist[state.scrollKey].chokerId)">
								<view class="diet-text">
									<p class="font-weight-600 f-size-20 my-1" v-if="state.drinkData.amountPlan">
										{{state.drinkData.amountPlan}}
									</p>
									<p class="font-weight-600 f-size-16" v-else>Feeding time is not set</p>
								</view>
								<view class="drinking-btn py-1 f-size-12 px-2 bor-radius-10 font-weight-600">
									Drink water
								</view>
								<image src="/static/image/drip.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 健康 -->
				<view class="mypet-content-health">
					<view class="mypet-content-health">
						<view class="mypet-content-health-text">
							<text class="">Health reminder</text>
						</view>
						<!-- 四宫格 -->
						<view class="mypet-content-health-detail d-flex jc-around my-2">
							<view v-for="(item,index) in state.healthlist"
								@click="goto('/pages/MyPet/HealthReminder?type='+index+'&chokerId='+state.petlist[state.scrollKey].chokerId)"
								class="health-detail-box bor-radius-10 m-1   d-flex ai-center ">
								<view class="health-detail-box-left m-2 mr-4">
									<image class="icon" :src="item.img" mode=""></image>
								</view>
								<view class="health-detail-box-right f-size-12	">
									<p class="font-weight-600">{{item.day? item.day:'not set'}}</p>
									<p class="font-weight-600">{{item.label}}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 档案 -->
				<view class="mypet-content-Archives">
					<view class="mypet-content-Archives">
						<view class="mypet-content-Archives-text flex-between-center">
							<text class="">Archives</text>
						</view>
						<!-- 表格 -->
						<view class="mypet-content-Archives-detail bor-radius-10 p-2 my-2">
							<view class="Archives-detail-item" v-for="item in state.ArchivesList" @click="show=true">
								<view class="py-2 flex-between-center">
									<text class="f-size-14">{{item.label}}</text>
									<text class="f-size-14">{{item.value}}</text>
								</view>
								<up-line v-if="item != 5"></up-line>
							</view>
						</view>
					</view>
				</view>
			</view>


			<MymodalVue :show="show" :width="'450rpx'">
				<template #content>
					<view class="modal-feed">
						<view class="modal-feed-image">
							<image src="../../static/image/bone.png" mode=""></image>
						</view>
						<view class="modal-feed-content">
							<view class="modal-feed-content-reminder">
								Fedding reminder
							</view>
							<view class="modal-feed-content-time">
								It is pet feeding time
							</view>
						</view>
					</view>
				</template>
				<template #confirmButton>
					<up-button text="I know"
						color="linear-gradient(140.43deg, rgba(255,187,46,1) 1.29%,rgba(254,134,9,1) 94.17%)"
						style="width: 90px;height: 30px;" @click="show=false"></up-button>
				</template>
			</MymodalVue>
		</view>

	</view>
</template>

<script setup>
	import MymodalVue from '../../components/Mymodal/Mymodal.vue';
	import MypetSwiper from './components/MypetSwiper.vue';
	import {
		throttle
	} from '@/uni_modules/uview-plus';
	import {
		getpetList
	} from '../../api/MyPet';
	import {
		getdietplan
	} from '../../api/Dietplan';
	import {
		findremainingDate
	} from '../../api/healthPlan';
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	let percentage = ref(60)
	const show = ref(true)
	const indicatorkey = ref(0)
	let state = reactive({
		petCategorylist: ['dog', 'cat'],
		petSexlist: ['默认', ':公', '母'],
		healthlist: [{
				day: '',
				prop: "takeHealthAlerts",
				label: 'Bath',
				img: '/static/icon/bath.png'
			},
			{
				day: '',
				prop: 'giveHealthAlerts',
				label: 'Vaccine',
				img: '/static/icon/Vaccine.png'
			},
			{
				day: '',
				prop: 'medicineHealthAlerts',
				label: 'Take medicine',
				img: '/static/icon/medicine.png'
			},
			{
				day: '',
				prop: 'parasiteHealthAlerts',
				label: 'Deworming',
				img: '/static/icon/Deworming.png'
			},
		],
		ArchivesList: [{
				label: 'Name',
				prop: 'petName',
				value: 'Molly'
			},
			{
				label: 'Gender',
				prop: 'petCategory',
				value: 'female'
			},
			{
				label: 'Breed',
				prop: 'petSex',
				value: 'not set'
			},
			{
				label: 'Birthday',
				prop: 'petBirthday',
				value: 'not set'
			},
			{
				label: 'Weight',
				prop: '',
				value: 'not set'
			}
		],
		screenWidth: '',
		scrollLeft: '',
		petlist: [],
		scrollKey: 0,
		feedData: {},
		drinkData: {},
		params: {
			pageIndex: 1,
			pageSize: 10
		}
	})

	onShow(() => {
		// 跳过登录
		getpetList().then(res => { //获得宠物列表
			state.petlist = res.data.list
			getpetTable(state.petlist)
			gethealthreminder() //获得健康计划
			getplan() //获得饮食计划
		})

	})


	const getpetTable = (res) => {
		let obj = {}
		for (let key in state.ArchivesList) {
			let target = res[state.scrollKey][state
				.ArchivesList[key].prop
			]
			obj[key] = {
				value: '',
				label: state.ArchivesList[key].label,
				prop: state.ArchivesList[key].prop,
			}
			if (state.ArchivesList[key].prop == 'petSex') {
				obj[key].value = state.petSexlist[target]
			} else if (state.ArchivesList[key].prop == 'petCategory') {
				obj[key].value = state.petCategorylist[target]
			} else {
				console.log(state.ArchivesList[key]);
				obj[key].value = target
			}
		}
		state.ArchivesList = obj
	}


	const getplan = () => {
		// console.log(state.petlist[state.scrollKey], 'sd');
		getdietplan({ //喂食
			chokerId: state.petlist[state.scrollKey].chokerId,
			dietaryProgramType: 0,
			type: 0
		}).then(res => {
			res.data ? state.feedData = res.data[0] : state.feedData = {}
		})
		getdietplan({ //喝水
			chokerId: state.petlist[state.scrollKey].chokerId,
			dietaryProgramType: 1,
			type: 0
		}).then(res => {
			res.data ? state.drinkData = res.data[0] : state.drinkData = {}
		})
	}

	const gethealthreminder = async () => { //获得健康计划
		let res = await findremainingDate({
			chokerId: state.petlist[state.scrollKey].chokerId
		})

		state.healthlist.forEach(v => {
			if (res.data[v.prop]) {
				v.day = res.data[v.prop] + ' day'
			}
		})
	}

	const scroll = (e) => {
		state.scrollLeft = e.detail.scrollLeft
	}

	function swiperchange(e) { //轮播改变的时候触发
		throttle(() => {
			state.scrollKey = e
			getpetTable(state.petlist)
			getplan()
			gethealthreminder()
		}, 500)

	}

	function goto(url) {
		uni.$to(url)
	}
</script>

<style lang="scss" scoped>
	.app {
		.mypet-content {
			.mypet-plan-line {
				.mypet-plan-line-box {
					.mypet-plan-line-text {
						text {
							color: $uni-grey;
							font-size: 24rpx;
						}
					}
				}
			}

			.mypet-content-box {
				background-color: #f8f7fc;

				.mypet-content-plan {
					.mypet-content-plan {
						.mypet-content-plan-text {
							.all {
								color: $uni-grey;
							}
						}

						.mypet-content-plan-diet {
							.diet {
								width: 320rpx;
								height: 340rpx;
								position: relative;
								padding: 20rpx;
								box-sizing: border-box;

								image {
									width: 184rpx;
									height: 180rpx;
									position: absolute;
									bottom: 0;
									left: 0;
								}

								.diet-text {
									p {
										color: $uni-bg-color;
									}
								}
							}

							.feed {
								background: $uni-bg-linear-origin;

								.feed-btn {
									float: right;
									transform: translateY(150rpx);
									background-color: rgba(255, 255, 255, 0.3);
									color: white;
								}
							}

							.drinking {
								background: $uni-bg-linear-blur;

								.drinking-btn {
									float: right;
									transform: translateY(150rpx);
									background-color: #79b5ff;
									color: white;
								}
							}
						}
					}
				}

				.mypet-content-health {
					.mypet-content-health-detail {
						flex-wrap: wrap;

						.health-detail-box {
							display: flex;
							background-color: $uni-bg-color;
							width: 320rpx;
							height: 138rpx;
							box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);

							.health-detail-box-left {
								.icon {
									width: 60rpx;
									height: 60rpx;
								}
							}

							.health-detail-box-right {
								:last-child {
									color: $uni-grey;
								}
							}
						}
					}
				}

				.mypet-content-Archives {
					.mypet-content-Archives-detail {
						background-color: $uni-bg-color;
					}
				}
			}

			::v-deep .u-modal__content {
				padding: 0 !important;
			}

			.modal-feed {
				.modal-feed-image {
					width: 450rpx;
					background: $uni-bg-linear-origin;
					display: flex;
					align-items: center;
					justify-content: center;
					// border: 1px solid red;

					image {
						width: 120rpx;
						height: 120rpx;
					}
				}

				.modal-feed-content {
					display: flex;
					align-items: center;
					// justify-content: center;
					justify-content: space-evenly;
					// border: 1px solid red;
					height: 100px;
					flex-direction: column;

					.modal-feed-content-reminder {
						font-weight: 600;
						font-size: 32rpx;
					}

					.modal-feed-content-time {
						font-size: 28rpx;
					}
				}


				// align-items: c;
				// justify-content: center;
				// background-image: url('/static/image/bone.png');
				// background-color:  $uni-bg-color;
			}
		}


	}
</style>